<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>3D建模工具</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/3d-modeling.css">
</head>
<body>

<!-- 主体结构 -->
<main class="page-layout">

    <!-- 工具面板 -->
    <aside class="tool-panel">
        <div class="project-controls">
            <button>新建项目</button>
            <button>打开项目</button>
            <button>保存项目</button>
        </div>

        <h2>基础建模工具</h2>
        <div class="tool-buttons">
            <button class="model-tool">立方体</button>
            <button class="model-tool">球体</button>
            <button class="model-tool">圆柱</button>
            <button class="model-tool">圆锥</button>
        </div>

        <section class="material-library">
            <h3>材质库</h3>
            <div class="materials">
                <div class="material" style="background:#8b4513;"></div>
                <div class="material" style="background:#c0c0c0;"></div>
                <div class="material" style="background:#ffd700;"></div>
                <div class="material" style="background:#4682b4;"></div>
            </div>
        </section>

        <section class="lighting-settings">
            <h3>光照设置</h3>
            <label>环境光：<input type="range" min="0" max="100" value="50"></label><br/>
            <label>平行光角度：<input type="range" min="0" max="360" value="90"></label>
        </section>
    </aside>

    <!-- 工作区 -->
    <section class="workspace">
        <canvas id="renderCanvas"></canvas>
    </section>

</main>

<script src="../js/3d-script.js"></script>
</body>
</html>